<template>
  <div>
    <div :class="{hidden: isHidden}">
      <div class="app-container">
        <el-row>
          <el-table 
            v-loading="listLoading" 
            :data="pageList" 
            :stripe="true" 
            element-loading-text="Loading" 
            :border="false"
            :header-cell-style="{ color: 'black' }" 
            fit 
            highlight-current-row
          >
            <el-table-column :label="$t('group_name')" align="center" min-width="15%">
              <template slot-scope="scope">
                <span>{{ scope.row.name }}</span>
              </template>
            </el-table-column>
            <el-table-column :label="$t('people')" align="center" min-width="15%">
              <template slot-scope="scope">
                <span>{{ scope.row.users.length }}</span>
              </template>
            </el-table-column>
            <el-table-column :label="$t('member')" align="center" min-width="50%">
              <template slot-scope="scope">
                <el-tag v-for="(user, index) in scope.row.users" :key="index" small>{{ user }}</el-tag>
              </template>
            </el-table-column>
            <!-- <el-table-column align="center" :label="$t('operation')" width="150px" fixed="right">
              <template slot-scope="scope">
                <span style="margin-right: 3px"><a @click="toDetail(scope.row.id)">{{ $t('detail') }}</a></span>
                <span
                  v-if="!$store.getters.isSelf(scope.row.id) && $store.getters.isAdmin() && !$store.getters.isAdminGroup(scope.row.id) && !$store.getters.isVoidGroup(scope.row.id)"
                  @click="onDelete(scope.row.id)"><a>{{ $t('delete') }}</a></span>
              </template>
            </el-table-column> -->
          </el-table>

          <!-- 页数-->
          <el-row>
            <el-pagination
              align="center"
              :current-page="currentPage"
              :page-size="pageSize"
              :page-count="pageNum"
              @current-change="handlePageChange"
            />
          </el-row>
        </el-row>
        
      </div>
    </div>
  </div>
</template>

<script>
// import {getGroupListWithUser} from '@/api/user'
import {getGroupList} from '@/api/user'
import { isJSON } from '@/utils/common'
import SearchPanel from '@/components/SearchPanel/index.vue'

function newForm() {
  return {
    name: '',
    config: '{}'
  }
}

export default {
  components: {
    SearchPanel
  },
  data() {
    return {
      groupList: [],
      form: newForm(),
      listLoading: true,
      dialogFormVisible: false,
      // pagetation
      pageList: [],
      currentPage: 1,
      pageSize: 15,
      pageCount: 0,
      rules: {
        name: [
          { required: true, message: '请输入用户组名称', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.getData()
  },
  methods: {
    handlePageChange(nowPage) {
      this.pageCount = parseInt((this.groupList.length - 1) / this.pageSize) + 1
      this.pageList = this.groupList.slice((nowPage - 1) * this.pageSize, nowPage * this.pageSize)
      this.currentPage = nowPage
    },
    getData() {
      this.listLoading = true
      getGroupList().then(response => {
        console.log(response.data)
        this.groupList = response.data
        this.handlePageChange(1)
        this.listLoading = false
      })
    },
    onCancle() {
      this.form = newForm()
      this.dialogFormVisible = false
    },
    toDetail(id) {
      this.$router.push({ path: '/user/userGroup/userGroupDetail/' + id })
    },
  }
}
</script>


<style>
.create-container {
  margin-top: 20px;
  background-color: white;
  padding-top: 20px;
}
.descriptions {
  margin-top: 15px
}

.rule-form {
  width: 900px
}

.el-upload {
  width: 100%;
}

.el-upload .el-upload-dragger {
  width: 100%;
}

.el-row {
  margin-bottom: 2px; /* 例如增加底部间距 */
}

/* Add or modify this in your <style> section */
.el-form-item {
  margin-bottom: 10px; /* Increase or decrease the bottom margin as needed */
}

/* Adjust the checkbox positioning */
.el-form-item input[type="checkbox"] {
  margin-right: 5px; /* Increase or decrease the right margin as needed */
  vertical-align: middle; /* Align the checkbox vertically */
}

.el-form-item label {
  display: inline-block; /* Ensure the label and checkbox stay in line */
  vertical-align: middle; /* Align the label vertically */
  color: gray; /* 设置复选框字体颜色为灰色 */
  font-weight: normal;
}
.el-table__row {
  cursor: move; /* 添加鼠标指针样式，表示可以拖拽 */
}
.task-container {
  display: flex;
  align-items: center;
}

.task-number {
  margin-right: 18px;
  margin-left: 10px;
}

.header-buttons, .cell-buttons {
  display: flex;
  justify-content: flex-end; /* 使按钮右对齐 */
  margin-right: 10px;
  /*align-items: center; !* 垂直居中对齐 *!*/
}


.el-table .el-table__body-wrapper {
  overflow-x: hidden; /* 隐藏横向滚动条 */
}
.el-table {
  table-layout: fixed; /* 固定表格布局，防止内容溢出 */
}

.custom-table {
  border: 1px  solid #dcdfe6; /* 边框颜色 */
  border-radius: 5px;
  /*border-collapse: collapse; !* 边框合并 *!*/
}
</style>
